<template>
	<view class="question-item" :style="{ height: height ? height + 'px' : 'auto' }">
		<view class="question-content">
			<!--标题-->
			<view class="title-info">
				<rich-text :nodes="resetTitle(data)" class="title"></rich-text>
			</view>
			<!--问题描述-->
			<view class="rich-text" v-if="data.question && showHtml">
				<!--  <rich-text :nodes="data.question" v-if="data.question"></rich-text> -->
				<uvParse :domain="proxy.Api.domain" :content="data.question"></uvParse>
			</view>
			<uni-forms-item :name="['questionList', index, 'userAnswer']" :key="data.questionId"
				:rules="[{ required: true, errorMessage: '请选择答案' }]">
				<!--问题选项-->
				<view class="question-option">
					<uv-checkbox-group @change="handleCheck"  size="30" placement="column" v-model="checkBoxValue"
						v-if="data.questionType == 2">
						<uv-checkbox shape="circle" :customStyle="{margin: '7px'}"
							v-for="(item, index) in formateAnswerOptions(data)" :key="index" :label="item.text"
							:name="index">
							<template v-slot:default>
								<uvParse :content="item.text"></uvParse>
							</template>
						</uv-checkbox>
					</uv-checkbox-group>
					<uv-radio-group @change="handleRadio" size="30" placement="column" v-model="checkRadioValue"
						v-if="data.questionType == 0 || data.questionType == 1">
						<uv-radio :customStyle="{margin:'7px'}" v-for="(item, index) in formateAnswerOptions(data)"
							:key="index" :label="item.text" :name="item.value">
							<template v-slot:default>
								<uvParse :content="item.text"></uvParse>
							</template>
						</uv-radio>
					</uv-radio-group>
					<view  v-if="data.questionType==2" class="checkBox-style">
						<button 
						style="background: linear-gradient(to right, #9060df, #6356de);width: 120px;margin-top: 20px;border-radius: 15px;"  
						class="mini-btn" 
						type="primary" 
						size="default"
						@click="handleCheckBox"
						>
						{{showAnswer ? "下一题" : "确定"}}
						</button>
					</view>
					
				</view>
			</uni-forms-item>
			<view class="custom-button" v-if="data.questionType == 3">
				<button style="background: linear-gradient(to right, #9060df, #6356de);width: 120px;margin-top: 20px;border-radius: 15px;" type="primary" size="default" @click="handleClick">查看答案</button>
			</view>
			<!--问题答案-->
			<view class="question-answer" v-if="showUserAnswer">
				<view class="left">
					<text>你的答案: </text>
					<text class="answer my" :style="{color: check() ? '#33CC33' : '#fb2e2e'}">{{
					  answer
					}}</text>
				</view>
				<view class="right">
					<text>参考答案: </text>
					<text class="answer">{{ getAnswer(data, 0) }}</text>
				</view>
			</view>
		</view>
		<template v-if="showAnswer">
			<!--分割线-->
			<view class="line"></view>
			<!--答案解析-->
			<view class="answer-analysis">
				<view class="title">- <text class="inner">试题详解</text> -</view>
				<view class="difficulty-panel">
					<view class="part-title">难度</view>
					<view class="star"><uni-rate size="20" :readonly="true" :value="data.difficultyLevel"
							activeColor="#aa6bd9" /></view>
				</view>
				<template v-if="showAnswer">
					<view class="part-title">题目解析</view>
					<view class="rich-text">
						<uvParse :domain="proxy.Api.domain" :content="data.answerAnalysis" v-if="data.answerAnalysis"></uvParse>
						<view class="no-data" v-if="!data.answerAnalysis">暂无答案解析</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script setup>
	import uvParse from "@/pages/components/uv-parse/components/uv-parse/uv-parse.vue";
	import {
		LETTER,
		QUESTION_TYPE,
		LOCAL_STORAGE_KEY
	} from "@/utils/Constants.js";
import { Value } from "sass";
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		computed,
		defineEmits
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const emits = defineEmits(["nextPage"])
	const props = defineProps({
		modelValue: {
			type: [String, Array],
		},
		height: {
			type: Number,
		},
		data: {
			type: Object,
			default: {},
		},
		index: {
			type: Number,
		}
		// showAnswer: {
		// 	type: Boolean,
		// 	default: false,
		// },
		// showHtml: {
		// 	type: Boolean,
		// 	default: false,
		// },
		// showUserAnswer: {
		// 	type: Boolean,
		// 	default: true,
		// },
	});
	const check = () => {
		if (props.data.questionType == 2) 	return checkBoxValue.value.join(",") == props.data.questionAnswer
		return checkRadioValue.value == props.data.questionAnswer
	}
	const resetTitle = (data) => {
		return (props.index + 1) + "." + data.title + "（" + QUESTION_TYPE[data.questionType] + "）";
	};
	const style = {
		span: 'font-size: 40rpx'
	}
	const checkBoxValue = ref([])
	const checkRadioValue = ref()
	const showAnswer = ref(false);
	const showHtml = ref(true)
	const showUserAnswer = ref(false)
	const answer = ref("")
	const handleRadio = (val) => {
		if (props.data.questionType == 1) {
			answer.value = LETTER[val]
			showAnswer.value = true
			showUserAnswer.value = true
			if (checkRadioValue.value == props.data.questionAnswer) {
				setTimeout(() => {
					emits("nextPage")
				}, 400)
			}
			return
		}
		answer.value = val == 1 ? "正确" : "错误"
		showAnswer.value = true
		showUserAnswer.value = true
		if (val == props.data.questionAnswer) {
			setTimeout(() => {
				emits("nextPage")
			}, 400)
		}
	}
	const handleCheck = () => {
		const answerResult = [];
		checkBoxValue.value.forEach(item => {
			answerResult.push(LETTER[item]);
		})
		answer.value = answerResult.join(",")
	}
	const handleCheckBox = () => {
		//如果已经显示答案
		if (showAnswer.value == true) {
			emits("nextPage")
			return;
		}
		handleCheck()
		showAnswer.value = true
		showUserAnswer.value = true
	}
	const handleClick = () => {
		showAnswer.value = !showAnswer.value
	}
	const formateAnswerOptions = (question) => {
		let options = [];
		if (question.questionType == 0) {
			options = [{
					text: "正确",
					value: "1",
					disable: props.showAnswer,
				},
				{
					text: "错误",
					value: "0",
					disable: props.showAnswer,
				},
			];
			return options;
		}
		const questionItemList = question.questionItemList;
		for (let i = 0; i < questionItemList.length; i++) {
			options.push({
				text: questionItemList[i].title,
				value: i + "",
				disable: props.showAnswer,
			});
		}
		return options;
	};

	//获取正确答案
	const getAnswer = (item, answerType) => {
		if (item.questionAnswer == null) {
			return;
		}
		const answer = answerType == 0 ? item.questionAnswer : item.userAnswer;
		if (answer == null) return
		if (item.questionType == 0) {
			return answer == "0" ? "错误" : "正确";
		} else {
			const answerArray =
				answerType == 0 || (answerType == 1 && item.questionType !== 2) ?
				answer.split(",") :
				answer;
			const answerResult = [];
			answerArray.forEach((item) => {
				answerResult.push(LETTER[Number.parseInt(item)]);
			});
			return answerResult.join(" ");
		}
	};
</script>

<style lang="scss" scoped>
	.custom-button {
		display: flex;
		align-items: center;
	}

	.question-item {
		overflow: auto;

		.question-content {
			padding: 10px;
			padding: 10px;

			:deep .uni-forms-item__label {
				display: none;
			}

			:deep .uni-forms-item {
				margin-bottom: 10px;
			}

			.title-info {
				align-items: top;
				font-size: 19px;
				line-height: 25px;

				.question-type {
					background: #0b93f4;
					color: #fff;
					font-weight: normal;
					padding: 1px 5px;
					border-radius: 3px;
					font-size: 13px;
				}

				.title {
					font-weight: bolder;
					display: inline;

					div {
						display: inline-block;
					}
				}

				.answer-result {
					width: 20px;
				}

				.iconfont {
					font-size: 30px;
				}

				.icon-ok {
					color: green;
				}

				.icon-wrong {
					color: red;
				}
			}

			.question-option {
				.checkBox-style {
					display: flex;
					align-items: center;
				}
				margin-top: 10px;
			}

			.question-answer {
				background: #efefef;
				padding: 5px 10px;
				font-weight: bold;
				border-radius: 3px;
				display: flex;
				justify-content: space-between;


				.answer {
					margin: 0px 15px 0px 5px;
					color: #33CC33;
					font-weight: normal;
				}

				.my {
					// color: #fb2e2e;
					margin-left: 5px;
				}

				.iconfont {
					float: right;
					font-size: 20px;
					font-weight: normal;
				}

				.icon-ok {
					color: #07b107;
				}

				.icon-wrong {
					color: #fb2e2e;
				}
			}
		}

		.line {
			background: #ececec;
			height: 10px;
		}

		.answer-analysis {
			padding: 10px;
			overflow: auto;

			.title {
				text-align: center;
				color: #767575;
				margin: 5px 0px 10px;

				.inner {
					font-weight: bolder;
					color: #1f282e;
				}
			}

			.part-title {
				font-size: 16px;
				line-height: 30px;
				font-weight: bold;
				color: #3e3e3e;
			}

			.difficulty-panel {
				display: flex;
				align-items: center;
				margin-top: 5px;

				.star {
					flex: 1;
					margin-left: 5px;
				}
			}
		}

		.rich-text {
			padding: 5px 0px;
			font-size: 16px;
		}
	}
</style>